import type { TableColumnProps } from '~/components/ProSaasTable/typings'
import type { HistoryTaskDataItemType } from './typings'
import { defineComponent, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ElCard, ElButton } from 'element-plus'
import AliIcon from '~/components/AliIocn'
import ProSaasTable from '~/components/ProSaasTable'
import ColorfulBadge from '~/components/ColorfulBadge'
import useVuexGetters from '~/hooks/useVuexGetters'
import styles from '../../index.module.scss'

export default defineComponent(function HistoryTask() {
  const route = useRoute()
  const store = useStore()
  const loopSwitchGroupState = useVuexGetters('loopSwitchGroup', [
    'applyStateSelectList',
    'applyStateEnum'
  ])
  const switchLightStrategyState = useVuexGetters('switchLightStrategy', [
    'taskTypeSelectList',
    'taskTypeEnum'
  ])

  const handleBack = () => {
    store.dispatch(
      'user/MatchRouterNameJumpAddress',
      route?.params?.menuCode || 'loop_switch_group'
    )
  }

  onMounted(() => {
    // 如果没有id则跳回上一个页面
    if (!route?.params?.id) {
      handleBack()
      return
    }
    if (!switchLightStrategyState.taskTypeSelectList.value?.length)
      store.dispatch('switchLightStrategy/GetTaskTypeSelectList')
    if (!loopSwitchGroupState.applyStateSelectList.value?.length)
      store.dispatch('loopSwitchGroup/GetApplyStateSelectList')
  })

  const columns: TableColumnProps<HistoryTaskDataItemType>[] = [
    {
      label: '任务名称',
      prop: 'taskName',
      minWidth: 170
      // showOverflowTooltip: true
    },
    {
      label: '任务类型',
      prop: 'taskType',
      minWidth: 170,
      enumValues: switchLightStrategyState.taskTypeEnum
      // showOverflowTooltip: true
    },
    {
      label: '应用状态',
      prop: 'applyState',
      minWidth: 170,
      enumValues: loopSwitchGroupState.applyStateEnum,
      sortable: true,
      render: (option, value) => (
        <ColorfulBadge
          value={value}
          enumKey={option.row.applyState!}
          options={{ info: 2, warning: 1, success: 0 }}
        />
      )
      // showOverflowTooltip: true
    },
    {
      label: '应用时间',
      prop: 'applyBeginTime',
      minWidth: 220,
      sortable: true
      // showOverflowTooltip: true
    },
    {
      label: '结束时间',
      prop: 'applyEndTime',
      minWidth: 220
      // showOverflowTooltip: true
    },
    {
      label: '备注',
      prop: 'memo',
      minWidth: 220
      // showOverflowTooltip: true
    }
  ]

  return () => (
    <ElCard
      v-slots={{
        header: () => (
          <section class={styles['loop-group-tree-header']}>
            历史任务
            <ElButton text type="primary" onClick={handleBack}>
              返回上一级&nbsp;
              <AliIcon type="icon-fanhuishangyiji" />
            </ElButton>
          </section>
        )
      }}
    >
      <ProSaasTable<HistoryTaskDataItemType>
        columns={columns}
        rowKey="id"
        defaultSort={{ prop: 'applyBeginTime', order: 'descending' }}
        dispatchType="loopSwitchGroup/GetGroupLoopLogList"
        searchParams={{
          taskGroupLoopId: route?.params?.id
        }}
      />
    </ElCard>
  )
})
